<template>
  <commonpanel title="年初至今赛事统计" title-bg="green" class="bg">
    <div class="linebox">
      <div class="bgline">
        <div class="itembox"></div>
        <div class="itembox itembox2"></div>
      </div>
      <div class="line2">
        <div class="itembox itembox1">
          <div class="imgbox">
            <img src="@/assets/img/img9.png" alt="" />
          </div>
          <div class="descbox">
            <div class="desctext">当日</div>
            <div class="descvalue">
              <Numboxlist2 :value="3" color="#ffc934" />
            </div>
          </div>
        </div>
        <div class="itembox itembox2">
          <div class="imgbox">
            <img src="@/assets/img/img10.png" alt="" />
          </div>
          <div class="descbox">
            <div class="desctext">累计</div>
            <div class="descvalue">
              <Numboxlist2 :value="45" color="#00E1F0" />
            </div>
          </div>



        </div>
      </div>
    </div>
  </commonpanel>
</template>
<script lang="ts" setup>
import commonpanel from '@/components/common/panel.vue';



import Numboxlist2 from '@/components/common/numboxlist2.vue';
</script>
<style lang="scss" scoped>
.bg {
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.linebox {
  height: 100%;

  position: relative;

  .bgline {
    position: absolute;
    width: 100%;
    height: 100%;

    .itembox {
      width: 50%;
      height: 100%;
      float: left;
    }

    .itembox2 {
      position: relative;
    }

    .itembox2::before {
      position: absolute;
      content: '';
      width: 1px;
      height: 100px;
      background-image: url('@/assets/img/img7.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
}

.line2 {
  margin-top: 14px;
  margin-left: 30px;
  overflow: hidden;

  .itembox {
    width: 50%;
    float: left;
    display: flex;

    .imgbox {
      width: 48px;
      padding-top: 4px;

      img {
        width: 68px;
        height: 98px;
      }
    }

    .descbox {
      flex: 1;
      padding-left: 22px;

      .desctext {
        font-size: 12px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: #00ffff;
        line-height: 17px;
        opacity: 0.6;
        margin-top: 26px;
      }

      .descvalue {
        font-size: 24px;
        font-family: D-DIN-Bold;

        color: #00e1ff;
        line-height: 26px;
        margin-top: 8px;
      }
    }
  }

  .itembox1 {
    .descbox {
      .desctext {
        color: #ffc934;
      }

      .descvalue {
        color: #ffc934;
      }
    }
  }

  .itembox2 {
    .imgbox {
      margin-left: 10px;
    }

    .descbox {
      .desctext {
        color: #00e1f0;
        opacity: 0.8;
      }

      .descvalue {
        color: #00e1f0;
      }
    }
  }
}
</style>
